import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import React from 'react';
import { fitChartSize, formatPower } from '../utils/tools';

// 定义数据类型
export interface StationChargeHistoryData {
  stationId: number;
  totalChargeEnergy: number;
  totalDischargeEnergy: number;
  stationName: string;
}

// 定义组件属性类型
interface ChargeDischargeRankingProps {
  data: StationChargeHistoryData[];
}

// 创建组件
const ChargeDischargeRanking: React.FC<ChargeDischargeRankingProps> = ({ data }) => {
  // 对数据进行排序，从大到小
  const sortedData = data.sort((a, b) => b.totalChargeEnergy - a.totalChargeEnergy);
  // 提取排序后的数据
  const stationNames = sortedData.map((item) => item.stationName);
  const totalChargeEnergy = sortedData.map((item) => item.totalChargeEnergy);
  const totalDischargeEnergy = sortedData.map((item) => item.totalDischargeEnergy);

  // 配置 ECharts 选项
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      formatter: function (params: any) {
        const charge = params.find((param: any) => param.seriesName === '充电量');
        const discharge = params.find((param: any) => param.seriesName === '放电量');
        return `${params[0].name}<br/>充电量: ${formatPower(charge.value).value} ${
          formatPower(charge.value).unit
        }<br/>放电量: ${formatPower(discharge.value).value} ${formatPower(discharge.value).unit}`;
      },
    },
    grid: {
      left: '3%',
      right: '16%',
      bottom: '3%',
      top: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      show: false,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      data: stationNames,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        width: 58, // 限制宽度为 58px
        overflow: 'truncate', // 截断文本并显示省略号
        formatter: function (value: string) {
          if (value.length > 10) {
            // 根据需要调整字符数
            return value.slice(0, 10) + '...'; // 显示省略号
          }
          return value;
        },
        color: '#5381CC',
      },
      inverse: true,
    },
    series: [
      {
        name: '充电量',
        type: 'bar',
        barWidth: 8, // 设置条形图宽度
        barMinHeight: 10,
        barGap: '50%', // 设置柱状图之间的间隔
        itemStyle: {
          normal: {
            barBorderRadius: [0, 6, 6, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#56d433' },
              { offset: 1, color: '#fffceb' },
            ]),
          },
          emphasis: {
            // 取消 hover 时的颜色
            color: 'none',
            // 或者直接不设置 color 属性
            // 注意，如果设置为 undefined，可能会被识别为有效值，导致颜色重置
          },
          zlevel: 9,
        },
        data: totalChargeEnergy,
        label: {
          show: true,
          position: 'right', // 在条形图右侧显示
          formatter: (params: any) => {
            return `充: ${formatPower(params.value).value} ${formatPower(params.value).unit}`;
          },
          color: '#C4D4F1', // 设置文本颜色
          fontSize: fitChartSize(12),
        },
      },
      {
        name: '放电量',
        type: 'bar',
        barWidth: 8, // 设置条形图宽度
        barMinHeight: 10,
        barGap: '50%', // 设置柱状图之间的间隔
        itemStyle: {
          normal: {
            barBorderRadius: [0, 6, 6, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#1a6cfe' },
              { offset: 1, color: '#fffceb' },
            ]),
          },
          emphasis: {
            // 取消 hover 时的颜色
            color: 'none',
            // 或者直接不设置 color 属性
            // 注意，如果设置为 undefined，可能会被识别为有效值，导致颜色重置
          },
          zlevel: 9,
        },
        data: totalDischargeEnergy,
        label: {
          show: true,
          position: 'right', // 在条形图右侧显示
          formatter: (params: any) => {
            return `放: ${formatPower(params.value).value} ${formatPower(params.value).unit}`;
          },
          color: '#C4D4F1', // 设置文本颜色
          fontSize: fitChartSize(12),
        },
      },
    ],
  };

  return <ReactECharts option={option} style={{ width: '100%', height: fitChartSize(185) }} />;
};

export default ChargeDischargeRanking;
